<template>
  <div class="">
    <el-form
      label-width="80px"
      :model="formData"
      style="margin-top: 20px"
      :rules="rules"
      ref="DataFormRef"
      v-loading="loading"
    >
      <el-form-item label="简述" prop="text">
        <el-input v-model="formData.text"></el-input>
      </el-form-item>
      <el-form-item label="详述">
        <el-input v-model="formData.allText" type="textarea" :rom="5"></el-input>
      </el-form-item>
      <el-form-item label="结束日期" prop="date">
        <el-date-picker
          v-model="formData.date"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="时间范围" prop="date">
        <el-time-picker v-model="formData.startTime" placeholder="开始时间">
        </el-time-picker>
        <el-time-picker
          arrow-control
          v-model="formData.endTime"
          placeholder="结束时间"
          style="margin-top: 10px"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item label="颜色选择">
        <el-color-picker v-model="formData.color"></el-color-picker>
      </el-form-item>
      <el-form-item label="文字颜色选择">
        <el-select v-model="formData.textColor" placeholder="请选择文字颜色">
          <el-option label="白色" value="#fff"> </el-option>
          <el-option label="黑色" value="#000"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="20px" class="btns">
        <el-button-group>
          <el-button type="primary" size="small" @click="addPlan"
            >上传<i class="el-icon-upload el-icon--right"></i
          ></el-button>
          <el-button type="info" size="small" @click="noChange"
            >关闭<i class="el-icon-circle-close el-icon--right"></i
          ></el-button>
          <el-button type="success" size="small"
            >重置<i class="el-icon-refresh-left el-icon--right"></i
          ></el-button>
          <el-button type="danger" size="small" @click="delEvent"
            >删除<i class="el-icon-delete el-icon--right"></i
          ></el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      formData: {
        id: null,
        text: "",
        allText: "",
        date: new Date(),
        startTime: new Date(new Date(new Date().toLocaleDateString()).getTime()),
        endTime: new Date(
          new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
        ),
        color: "#409EFF",
        textColor: "#fff",
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "明天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      rules: {
        text: [
          { required: true, message: "请输入计划简介", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" },
        ],
        date: [
          {
            type: "date",
            required: true,
            message: "请选择日期时间，不能为空",
            trigger: "change",
          },
        ],
      },
      loading: false,
    };
  },

  mounted() {
    // console.log(time.getTime() > Date.now());
    // this.$bus.$on("selectEvent", (id) => {
    //   this.getOnePlan(id);
    // });
    if (this.$route.query.id) {
      this.getOnePlan(this.$route.query.id);
    }
  },
  methods: {
    addPlan() {
      this.$refs.DataFormRef.validate(async (valid, mes) => {
        if (!valid) return;
        this.loading = true;
        const { data: res } = await this.$http.post(
          "/calendar/Index/addplan",
          this.formData
        );
        this.loading = false;

        if (res.status !== 200) return this.$message.error(res.textRequest);

        this.$message.success(res.textRequest);
        this.$refs.DataFormRef.resetFields();
        this.$router.push("/eventList");
      });
    },
    noChange() {
      this.$refs.DataFormRef.resetFields();
      this.$router.push("/eventlist");
    },
    async getOnePlan(id) {
      const { data: res } = await this.$http.post("/calendar/Index/getOneplan", { id });
      this.formData = res;
      // console.log(this.formData);
    },
    async delEvent() {
      const { data: res } = await this.$http.post("/calendar/Index/delEvent", {
        id: this.formData.id,
      });
      if (res.status !== 200) return this.$message.error(res.textRequest);
      this.$message.success(res.textRequest);

      this.$bus.$emit("AllDate");
      this.$router.push("/eventList");
    },
  },
};
</script>

<style scoped>
.btns {
  margin-top: 3rem;
}
</style>
